<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 视口标签 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<!-- 引入公共的CSS样式 -->
		<link rel="stylesheet" href="css/base.css">
		<!-- 引入当前页的CSS样式 -->
		<link rel="stylesheet" href="css/home.css">
	</head>
	<body>
		<!-- 顶部 -->
		<div class="header">
			<img src="img/list.svg" alt="" class="list">
			<div class="main">
				<img src="img/listen.png" alt="0">
				<img src="img/look.png" alt="1">
				<img src="img/sing.png" alt="2">
			</div>
			<img src="img/search_index.png" alt="" class="search">
		</div>
		<div class="container">
			<div style="display: block;">这是听的内容</div>
			<div>这是看的内容</div>
			<div>这是唱的内容</div>
		</div>
		
		
		<!-- 导航列表 -->
		<div class="nav"></div>
	</body>
</html>

<!-- JS的书写位置 -->
<script>
	// 声明变量记录当前的状态
	var open = false
	// 从整个网页文档(document)，通过选择器来查找列表按钮
	// 给列表按钮绑定点击事件
	document.querySelector('.list').onclick = function(){
		// 点击后要执行的代码
		// alert()
		// 查找到类名为nav标签，让css属性中的left值为0
		// document.querySelector('.nav').style.left = 0
		// 如果open是true说明开，否则是关
		if(open==true) {// 如果开
			// 隐藏
			document.querySelector('.nav').style.left = '-40vw'
			// 状态变为关
			open = false
		}else{// 如果关
			//显示
			document.querySelector('.nav').style.left = 0
			// 状态变为开
			open = true
		}
	}

	// 从网页文档中查找到类main下所有img
	var arr = document.querySelectorAll('.main>img')
	// 找到所有container下div
	var divs = document.querySelectorAll('.container>div')
	// 循环获取每一个img标签
	for(var i=0; i<arr.length; i++) {
		// console.log(i, arr[i])
		// 给每个img绑定点击
		arr[i].onclick = function() {
			// 将所有的内容都隐藏
			for(var i=0;i<divs.length;i++) {
				// 让每个div的css属性中display为none
				divs[i].style.display = 'none'
			}
			
			// 让对应的显示
			// this 当前单击的标签
			// alert(this.alt)
			divs[this.alt].style.display = 'block'
		}
	}
	

</script>
